import React, { useState } from 'react';
import { View, Text, Image } from '@tarojs/components';
import './index.less';
import TitleBar from '@/src/components/titleBar';
import store from '@/src/store';
import { observer } from 'mobx-react-lite';
import Taro from '@tarojs/taro';
import { showToast, StatusToast } from '@/src/components/statusToast';

const IdentifyResult: React.FC = () => {
  const [noResult, setNoResult] = useState<boolean>(true);
  const [disabled, setDisabled] = useState<boolean>(false);
  const resultList: any = [
    {
      id: '1',
      title: 'Cohiba Siglo V',
      subtitle: '高希霸 世纪 五',
      image: 'https://file.linkcook.cn/image/wineMiniProgram/search/xuejia.png',
      time: '10:50:35',
    },
    {
      id: '2',
      title: 'Cohiba Siglo VI',
      subtitle: '高希霸 世纪 六',
      image: 'https://file.linkcook.cn/image/wineMiniProgram/search/xuejia.png',
      time: '08:24:17',
    },
    {
      id: '3',
      title: 'Montecristo No.2',
      subtitle: '蒙特利斯特罗 二号',
      image: 'https://file.linkcook.cn/image/wineMiniProgram/search/xuejia.png',
      time: '14:12:05',
    },
  ];

  // 一键反馈
  const feedbackClick = () => {
    if (!disabled) {
      showToast('反馈成功', 'success');
      setDisabled(true);
    }
  };

  // 重新识别点击事件
  const reIdentification = () => {
    store.commonStore.setShowTabBar(false);
    Taro.reLaunch({
      url: '/pages/scan/index',
    });
  };

  return (
    <View
      className="result-container"
      style={{
        paddingTop: `${store.commonStore.pageAreaTop}rpx`,
      }}
    >
      <TitleBar showLeftBack={true} title="识别结果"></TitleBar>
      {noResult ? (
        <View className="noResult-container">
          <View className="noResult-tips">
            <View>抱歉，未识别到雪茄资料，</View>
            <View>请按照下方示意图重新拍照。</View>
          </View>
          <View className="cigarDiagram-container">
            <Image
              src="https://file.linkcook.cn/image/wineMiniProgram/imgs/scan/cigarDiagram.png"
              className="ciga-img"
            ></Image>
            <View className="ciga-desc">请拍摄雪茄正标</View>
          </View>
          <StatusToast />
        </View>
      ) : (
        <View className="ciga-list">
          {resultList.map((item: any) => (
            <View className="record-item" key={item.id}>
              <View className="record-info">
                <Text className="item-title">{item.title}</Text>
                <View className="item-subtitle">{item.subtitle}</View>
              </View>
              {item.image && <Image src={item.image} className="record-img" />}
            </View>
          ))}
        </View>
      )}
      <View
        className="button-group"
        style={{
          bottom: `${store.commonStore.safeAreaBottom}rpx`,
          border: noResult ? 'none' : '1px solid rgba(0, 0, 0, 0.1);',
        }}
      >
        <View
          className="noneOftheAbove"
          style={{ opacity: disabled ? '0.5' : '1' }}
          onClick={feedbackClick}
        >
          <Text className="title">{noResult ? '一键反馈' : '以上都不是'}</Text>
          {!noResult && <Text className="feedback">（一键反馈）</Text>}
        </View>
        <View className="re-identification" onClick={reIdentification}>
          重新识别
        </View>
      </View>
    </View>
  );
};

export default observer(IdentifyResult);
